<template>
  <el-container>
    <!-- 左侧菜单 -->
    <el-aside width="200px" style="background-color: #62d1d2; color: #333;">
      <!-- Logo 区 -->
      <div class="aside-header" style="background-color: #30a5a7; color: white; padding: 15px; text-align: center; font-size: 1.2rem; font-weight: bold;">
        AdminSystem
      </div>

      <!-- 用户信息区 -->
      <div class="user-info" style="padding: 15px; display: flex; align-items: center;">
        <img src="../assets/1.jpg" alt="avatar" style="width: 40px; height: 40px; border-radius: 50%; margin-right: 10px;" />
        <div>
          <div style="font-size: 25px; font-weight: 700; color: #333;">YiBo</div>
        </div>
      </div>

      <!-- 菜单 -->
      <el-menu
          :default-active="'1'"
          class="el-menu-vertical-demo"
          background-color="#62d1d2"
          text-color="#333"
          active-text-color="#30a5a7"
          style="border: none;"
          unique-opened
      >
        <el-menu-item index="1">
          <i class="el-icon-s-home"></i>
          <router-link to="/admin/" tag="span">首页</router-link>
        </el-menu-item>

        <el-menu-item index="2">
          <template slot="title">
            <i class="el-icon-monitor"></i>
            <router-link to="/admin/user" tag="span">用户管理</router-link>
          </template>

        </el-menu-item>

        <el-menu-item index="3">
          <template slot="title">
            <i class="el-icon-s-tools"></i>
            <router-link to="/admin/system" tag="span">系统管理</router-link>
          </template>
        </el-menu-item>

        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>系统工具</span>
          </template>
          <el-menu-item index="4-1">系统工具1</el-menu-item>
          <el-menu-item index="4-2">系统工具2</el-menu-item>
        </el-submenu>

      </el-menu>
    </el-aside>

    <!-- 右侧内容区 -->
    <el-container>
      <!-- 新的顶部导航栏 -->
      <el-header style="background-color: #f5f7fa; color: #333; border-bottom: 1px solid #e6e6e6; display: flex; justify-content: space-between; align-items: center; padding: 0 20px;">
        <!-- 水平菜单 -->
        <el-menu
            :default-active="activeIndex"
            class="el-menu--horizontal"
            mode="horizontal"
            @select="handleSelect"
            style="flex-grow: 1; border-bottom: none;"
        >
          <el-menu-item index="1">处理中心</el-menu-item>
          <el-submenu index="2">
            <template slot="title">我的工作台</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
          </el-submenu>
          <el-menu-item index="3" disabled>消息中心</el-menu-item>
          <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
        </el-menu>

        <!-- 右侧用户下拉菜单 -->
        <el-dropdown @command="handleCommand" style="margin-left: 20px;">
          <span class="el-dropdown-link">
            <img src="../assets/1.jpg" alt="avatar" style="width: 30px; height: 30px; border-radius: 50%; margin-right: 8px; vertical-align: middle;" />
            YiBo
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="profile">个人信息</el-dropdown-item>
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>

      <el-main style="background-color: #a8e6e6; color: #333; text-align: center; line-height: 7px;">
        <router-view>

        </router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: "AdminView",
  data() {
    return {
      user:{}
    };
  },
  methods: {
    handleSelect(index) {
      console.log('选中了:', index);
    },
    handleCommand(command) {
      if (command === 'profile') {
        alert('跳转到个人信息页面');
      } else if (command === 'logout') {
        this.$router.push('/');
        // 这里可以写登出逻辑，例如 this.$router.push('/login')
      }
    }
  }
};
</script>

<style>
/* 菜单整体 */
.el-menu {
  border: none;
}

/* 菜单项和子菜单标题 */
.el-menu-item,
.el-submenu__title {
  height: 48px;
  line-height: 48px;
  padding-left: 20px;
  font-size: 15px;
  font-weight: 500;
  color: #1a1a1a;
  transition: all 0.2s ease;
}

/* 激活项文字颜色 */
.el-menu-item.is-active {
  color: #30a5a7 !important;
  font-weight: 600;
}

/* 悬停高亮 */
.el-menu-item:hover,
.el-submenu__title:hover {
  background-color: rgba(48, 165, 167, 0.15) !important;
  color: #30a5a7 !important;
}

/* 子菜单项（二级菜单） */
.el-submenu .el-menu-item {
  padding-left: 40px !important;
  font-weight: 400;
  color: #222;
}

.el-submenu .el-menu-item:hover {
  background-color: rgba(48, 165, 167, 0.1) !important;
  color: #30a5a7 !important;
}

/* 子菜单背景保持一致 */
.el-submenu .el-menu {
  background-color: #62d1d2 !important;
}

/* 展开箭头颜色 */
.el-submenu__title .el-submenu__icon-arrow {
  color: #1a1a1a;
}

/* 用户信息区文字也加粗一点 */
.user-info {
  font-weight: 500;
  color: #1a1a1a;
}

/* 去掉默认边距 */
body > .el-container {
  margin-bottom: 0;
}

/* 下拉菜单样式优化 */
.el-dropdown-link {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  color: #333;
}
</style>